<template>
  <div class="total">
    <!-- 第一部分 -->
      <h1>商标注销申请书</h1>
      <el-form ref="organization" :model="organization" :class="{'model-form-abel': editable}" :label-position="right" label-width="250px" size="mini">
      <el-form-item label="申请人名称(中文) :">
        <span>{{organization.appNameCn}}</span>
      </el-form-item>
      <el-form-item label="(英文) :">
        <span>{{organization.appNameEn}}</span>
      </el-form-item>
      <el-form-item label="申请人地址(中文) :">
        <span>{{organization.appAddCn}}</span>
      </el-form-item>
      <el-form-item label="(英文) :">
        <span>{{organization.appAddEn}}</span>
      </el-form-item>
      <el-form-item label="邮政编号 :">
        <span>{{organization.postCode}}</span>
      </el-form-item>
      <el-form-item label="联系人 :">
        <span>{{organization.contacts}}</span>
      </el-form-item>

      <el-form-item label="邮箱 :">
        <span>{{organization.email}}</span>
      </el-form-item>
       
      <el-form-item label="电话 :">
        <span>{{organization.phone}}</span>
      </el-form-item>
      <el-form-item label="代理机构名称 :">
        <span>{{organization.ageName}}</span>
      </el-form-item>
      <el-form-item label="商标注册号 :">
        <span>{{organization.appNum}}</span>
      </el-form-item>
      <div class="choice">
        <el-form-item label="是否共有商标 :">
          <!-- <el-radio-group v-model="organization.isComm">
            <el-radio :label="1" disabled v-if="organization.isComm">是</el-radio>
            <el-radio :label="0" disabled>否</el-radio>
          </el-radio-group> -->
          <span v-if="organization.isComm == '1'" style="margin-left:0px">是</span>
          <span v-else style="margin-left:0px">否</span>
        </el-form-item>
      </div>
      <el-form-item label="类别 :">
        <span>{{organization.addModel}}</span>
      </el-form-item>
      <el-form-item label="注销商品/服务项目(分类填写) :" style="">
       
            <span>{{organization.cancellationCommodity}}</span>
          <!-- </div> -->
        <!-- <span>{{organization.cancellationCommodity}}</span> -->
      </el-form-item>
      <el-form-item label="未交回原注册证原因 :">
          <span>{{organization.reasonsWithdrawal}}</span>
      </el-form-item>
      <el-form-item label="营业执照 :" class="busimg-img">
          <imgshow>
          <img :src="this.mconfig.host+organization.busimg" class="busimgbb" alt />
          </imgshow>
      </el-form-item>
      <el-form-item label="身份证正反面 :" class="idcard-img" v-if="organization.idcardimg !== ''">
          <imgshow>
          <img :src="this.mconfig.host+organization.idcardimg" class="idcardbb" alt />
          </imgshow>
      </el-form-item>
      <el-form-item label="网上确认书 :">
        <span><imgshow><img :src="imgURL(organization.qrfile)" alt="" class="idcardbb"> </imgshow> </span>
      </el-form-item>
      <!--<el-form-item class="mar" label="其他附件 :" v-if="organization.otherfile != []">-->
        <el-form-item class="mar" label="其他附件 :" v-if="organization.otherfile.length>0">
        <imgshow v-for="(item,index) in organization.otherfile" :key="index">
        <span class="qrfileBox"><img :src="imgURL(item)" ></span>
        </imgshow>
      </el-form-item>
    </el-form>

    <!-- 签字/章戳 -->
    <!-- <div class="signs">
      <div class="sign">
        <div>
          <span>许可人章戳(签字) :</span>
        </div>
        <div>
          <span>被许可人章戳(签字) :</span>
        </div>
        <div>
          <span>代理机构章戳 :</span>
        </div>
      </div>
      <div class="agent">
        <p>代理人签字 :</p>
      </div>
      <p class="careful">注：请 按 说 明 填 写</p>
    </div> -->

    <!-- 第二部分 -->
    <section>
      <div v-if="otherPublic[0]">
      <div class="model-title" >
        <h4>商标注销申请书</h4>
        <p>（附页）</p>
        <p style="font-size:16px;">其他共有人</p>
      </div>
      <div>
        <proAppend class="form19" :callback="otherPublic"></proAppend>
        <!-- <el-form  class="model-form" label-width="250px" size="small">
          <div v-for="(item,index) in otherPublic" :key="index">
            <div  v-if="item.partNameCh != ''">
              <el-row>
                <el-col :span="12">
                  <el-form-item :label="index+1 +'.名称(中文) :'">
                    <span>{{item.partNameCh}}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="(英文) :">
                    <span>{{item.partNameEn}}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="地址(中文) :">
                    <span>{{item.partAddrCh}}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="10" style="text-align:right">
                  <span class="signature">（章戳/签字）</span>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="(英文) :">
                    <span>{{item.partAddrEn}}</span>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-form> -->
      </div>
      </div>
    </section>

    <!-- 第三部分 -->
    
  </div>
</template>
<script>

import imgshow from '../common/imgshow'
import proAppend from "../common/proAppend"
export default {
  components:{
    imgshow,
    proAppend
  },
  name: 'Form',
  data() {
    return {
      right: "right",
      organization: {
        appNameCn: '', // 申请人名称（中文）
        appNameEn: '',  // 申请人名称（英文）
        appAddCn: '', // 申请人地址（中文）
        appAddEn: '',  // 申请人地址（英文）
        postCode: '',  //邮政编码
        contacts: '',  //联系人
        phone: '',  //电话
        qrfile:"",
        email:"",
        ageName: '', // 代理机构名称
        appNum: '',  // 商标注册号
        isComm: '',  //是否共有商标
        addModel: '',  // 类别
        otherfile:[],
        cancellationCommodity: '',  //注销商品/服务项目(分类填写)
        reasonsWithdrawal: '',  //	未交回原注册证原因
        // busimg:'', // 营业执照
        // idcardimg:'' // 身份证
      },
      secondmodel: [],
      // getcancellationCommodity: [],
      // 其他共有人
      otherPublic: [],
      editable: false// 可编辑
    }
  },
  watch: {
 
  },
  filters: {
    // 状态过滤器
    subStatusFilter(v) {
      switch (v) {
        case 1:
          return '保存'
          break;
        case 2:
          return '选择通过'
          break;
        case 3:
          return '选择未通过'
          break;
        case 4:
          return '未审核'
          break;
        default:
      }
    }
  },
  methods: {
    imgURL(_url){
      var newUrl = this.mconfig.host + _url
      return newUrl
    },
    // 提交审核
    
    lastPage() {
      this.editable = false; // 更改为不可编辑
    },
    // 修改
    modify() {
      this.editable = true; // 更改为可编辑
    },
    // 图片上传成功
    handleAvatarSuccess(res, file) {
      this.organization.confirmation = URL.createObjectURL(file.raw);
    },

    // 初始化数据
    getData() {
      this.$http.get('/trademark/tca/findByIdDetl', {
        params: {
          id: this.$route.query.id
        }
      }).then(response => {
        if (response.data.code == 200) {
          let data = response.data.data.data;
          let append = response.data.data.append;
          
          this.organization.busimg = response.data.data.data.busimg.split(",")[0]; // 营业执照
          this.organization.idcardimg = response.data.data.data.idcardimg.split(",")[0]; // 身份证
          this.organization.idcardface = response.data.data.data.idcardface.split(",")[0];
          // console.log(data);
          // console.log(this.organization.busimg);
          this.organization.appNameCn = data.appName; // 申请人名称（中文）
          this.organization.appNameEn = data.appNameEn; // 申请人名称（英文）
          this.organization.appAddCn = data.busAddress; // 申请人地址（中文）
          this.organization.appAddEn = data.appAddEn; // // 申请人地址（英文）
          this.organization.email = data.email; // // 申请人地址（英文）
          this.organization.qrfile = data.qrfile; // // 申请人地址（英文）
          this.organization.postCode = data.postCode;  //邮政编码
          this.organization.contacts = data.contacts;  //联系人
          this.organization.phone = data.phone;  //电话
          this.organization.otherfile = JSON.parse(data.otherfile)

          this.organization.ageName = data.deptName;  // 代理机构名称
          this.organization.appNum = data.appNum;    // 商标注册号
          this.organization.isComm = JSON.parse(data.isComm); //  是否共有商标: 1:是0:否

          this.organization.addModel = data.addModel;   // 类别

          // 注销商品/服务项目(分类填写)
          // let commodity = JSON.parse(data.cancellationCommodity);
          // this.getcancellationCommodity = commodity;
          this.organization.cancellationCommodity = JSON.parse(data.cancellationCommodity);  

          this.organization.reasonsWithdrawal = data.reasonsWithdrawal; // 	未交回原注册证原因
           
          // 共有人...
          this.otherPublic = append
          console.log(this.otherPublic[0],"2332132")
         

        }
      }).catch(error => { })
    }
  },
  created() {
    this.getData();
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.form19{
  margin-left: 200px;
}
.total {
  width: 1200px;
  /* margin: 0 auto; */
}
.total h1 {
  padding: 30px 0;
  text-align: left ;
  font-weight: 500;
  margin-left: 300px;
  font-size: 30px;
}
.el-form {
  margin-left: 162px;
}
.total div {
  margin-bottom: 0;
}

.positions {
  margin: 30px 0;
}
.choice span {
  margin-left: 50px;
}

/* 签字 */
.sign {
  display: flex;
  justify-content: center;
  margin-top: 100px;
}
.sign div {
  width: 200px;
  margin: 15px;
}
.sign div span {
  color: #000;
}
/* 代理人 */
.signs .agent {
  margin-top: 100px;
  margin-right: 350px;
  text-align: right;
}
.signs .careful {
  margin-top: 40px;
  margin-left: 310px;
  color: #999;
}

/* 附加页 */
ul,
li {
  padding: 0;
  margin: 0;
  list-style: none;
}
.additional {
  margin-top: 150px;
  height: 300px;
}
.additional h2 {
  text-align: center;
  font-weight: 500;
}
.additional .other {
  margin-top: 40px;
}
.additional .other .main {
  text-align: center;
  margin-top: 20px;
}

.additional ul {
  margin-top: 50px;
  margin-left: 300px;
}
.additional ul li {
  margin: 10px 0;
}

.additional ul li span {
  display: inline-block;
  width: 106px;
  text-align: right;
  color: #000;
}

.additional ul li p {
  display: inline-block;
  margin-left: 300px;
  color: #ccc;
  margin-top: -8px;
}

.model-title {
  padding: 0 100px;
  font-size: 28px;
  color: #666;
  font-weight: 400;
  margin-bottom: 40px;
  margin-left: 210px;
}
.model-title h4,
.model-title p {
  margin: 10px 0;
}
.model-title p {
  font-size: 18px;
}
.model-title > h4 {
  font-size: 22px;
  font-weight: normal;
  margin-top: 30px;
}
.seal {
  padding: 0 20px;
}
.seal-container {
  min-height: 150px;
}
.model-form{
  margin-bottom: 50px;
}
/* 签字 */
.signature {
  color: #ccc;
}
.busimgbb{
  
  margin: 5px;
}
.idcardbb{
  display: inline-block;
  margin:5px;
}
</style>